<!-- 评价的系统消息 -->
<script lang="ts" setup>
  import { evaluateDoctorApi } from '@/api/consult'
  import type { Msg } from '@/types/room'
  import { ref } from 'vue'

  // 3.接收父传子
  const props = defineProps<{ orderId: string; docId: string; type: number; info: Msg }>()

  const formData = ref({
    score: 0,
    content: '',
    anonymousFlag: 0,
  })

  const onSubmit = async () => {
    await evaluateDoctorApi({ ...formData.value, orderId: props.orderId, docId: props.docId })
    uni.showToast({ title: '评价成功' })
  }
</script>
<template>
  <!-- 医生评价 -->
  <view class="doctor-rating">
    <view class="title">医生服务评价</view>
    <view class="subtitle">本次在线问诊服务您还满意吗？</view>
    <view class="rating">
      <uni-rate v-if="type === 23" v-model="formData.score" :size="28" margin="12" :value="0" />
      <!-- 5. 显示一个只读的评分即可 -->
      <uni-rate
        readonly
        v-if="type === 24"
        :size="28"
        margin="12"
        :value="info.evaluateDoc?.score"
      />
    </view>

    <!-- 4. 隐藏输入框和按钮 -->
    <template v-if="type === 23">
      <view class="text">
        <uni-easyinput
          v-model="formData.content"
          type="textarea"
          :maxlength="150"
          :input-border="false"
          :style="{ backgroundColor: '#f6f6f6' }"
          placeholder-style="font-size: 28rpx; color: #979797"
          placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"
        />
        <text class="word-count">{{ formData.content.length }}/150</text>
      </view>
      <view class="anonymous" @click="formData.anonymousFlag = formData.anonymousFlag ? 0 : 1">
        <uni-icons
          v-if="formData.anonymousFlag === 1"
          size="16"
          color="#16C2A3"
          type="checkbox-filled"
        />
        <uni-icons v-else size="16" color="#d1d1d1" type="circle" />
        <text class="label">匿名评价</text>
      </view>
      <button :disabled="!formData.score" class="uni-button" @click="onSubmit">提交</button>
    </template>
  </view>
</template>

<style lang="scss">
  .doctor-rating {
    padding: 30rpx 30rpx 40rpx;
    border-radius: 20rpx;
    background-color: #fff;
    margin-top: 60rpx;

    .title {
      text-align: center;
      font-size: 30rpx;
      color: #121826;
    }

    .subtitle {
      text-align: center;
      font-size: 24rpx;
      color: #6f6f6f;
      margin: 10rpx 0 20rpx;
    }

    .rating {
      display: flex;
      justify-content: center;
    }

    .text {
      padding: 20rpx 30rpx;
      margin-top: 20rpx;
      background-color: #f6f6f6;
      border-radius: 20rpx;
      position: relative;
    }

    :deep(.uni-easyinput__content-textarea) {
      font-size: 28rpx;
    }

    .word-count {
      position: absolute;
      bottom: 20rpx;
      right: 30rpx;
      line-height: 1;
      font-size: 24rpx;
      color: #6f6f6f;
    }

    .anonymous {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 30rpx 0;
      color: #6f6f6f;
      font-size: 24rpx;

      .label {
        margin-left: 6rpx;
      }
    }

    .uni-button[disabled] {
      color: #a6dbd5;
      background-color: #eaf8f6;
    }
  }
</style>
